import React, { Component } from 'react'
import Header from '../common/Header';
import {connect} from 'react-redux';
import {Toast} from "antd-mobile";
import { addCity_action } from '../../store/store';
class AddCity extends Component {
    constructor(){
        super();
        this.state={
            username:'',
            call:'',
            city:'',
        }
    }
    btnClick=()=>{
        if(this.state.username===''||this.state.call===''||this.state.city===''){
            Toast.fail('红星标志的是必填项',2)
        }else{
            this.props.add(this.state);
            Toast.success('保存成功',1)
            setTimeout(()=>{
                this.props.history.push('/city');
            },1000)
        }
    }
    render() {
        return (
            <div className='addcity'>
                {/* 头部组件 */}
                <Header left={<span onClick={() => { this.props.history.push('/city') }}>&lt;</span>} title="新增地址" right={<div><span className='iconfont icon-sangedian'></span>|<span className='iconfont icon-cha'></span></div>}></Header>
                {/*表单 */}
                <div className="from">
                    <div className="black">
                        <span className='first'>联系人<span className='xin'>*</span></span>
                        <div className="inp">
                            <input type="text" placeholder='姓名' onChange={(e)=>{this.setState({username:e.target.value})}}/>
                        </div>
                    </div>
                    <div className="black">
                        <span className='first'></span>
                        <div className="inp">
                            <span>男</span>
                            <span>女</span>
                        </div>
                    </div>
                    <div className="black">
                        <span className='first'>电话<span className='xin'>*</span></span>
                        <div className="inp">
                            <input type="text" placeholder='手机号码'  onChange={(e)=>{this.setState({call:e.target.value})}}/>
                        </div>
                        <div className="tong">
                                + 通讯录
                            </div>
                    </div>
                    <div className="black">
                        <span className='first'>地址<span className='xin'>*</span></span>
                        <div className="inp">
                            <input type="text" placeholder='请输入收货地址'  onChange={(e)=>{this.setState({city:e.target.value})}}/>
                        </div>
                    </div>

                    <div className="black">
                        <span className='first'>门牌号</span>
                        <div className="inp">
                            <input type="text" placeholder='列如：5号楼203室' />
                        </div>
                    </div>
                    <div className="black">
                        <span className='first'></span>
                        <div className="inp">
                            <span>家</span>
                            <span>学校</span>
                            <span>公司</span>
                        </div>
                    </div>
                </div>
                <div className="btn">
                    <button onClick={()=>{this.btnClick()}}>保存并使用</button>
                </div>
            </div>
        )
    }
}
export default connect(
    (state)=>{
        return {

        }
    },
    (dispatch)=>{
        return {
            add:(item)=>{
                dispatch(addCity_action(item))
            }
        }
    }
)(AddCity)
